<template>
    <div>
        <ul class="icon-list">
            <li v-for="(item,index) in icons" @click="handleSelectIcon(item)">
                <span>
                    <i :class="item"></i>
                    <span class="icon-name">{{item}}</span>
                </span>
            </li>
        </ul>

    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
                icons: [
                    'el-icon-platform-eleme',
                    'el-icon-eleme',
                    'el-icon-delete-solid',
                    'el-icon-s-tools',
                    'el-icon-setting',
                    'el-icon-user-solid',
                    'el-icon-user',
                    'el-icon-phone',
                    'el-icon-phone-outline',
                    'el-icon-more',
                    'el-icon-more-outline',
                    'el-icon-user',
                    'el-icon-menu',
                    'el-icon-reading',
                    'el-icon-document'
                ]
            }
        },
        methods: {
            handleSelectIcon(item) {
                this.$emit('handleSetIcon',item);
            }
        }
    }
</script>

<style scoped lang="less">

    .icon-list {
        overflow: hidden;
        list-style: none;
        padding: 0 !important;
        border: 1px solid #eaeefb;
        border-radius: 4px;
    }

    .icon-list li {
        display: list-item;
        float: left;
        width: 70px;
        text-align: center;
        height: 60px;
        color: #666;
        font-size: 5px;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
        margin-right: -1px;
        margin-bottom: -1px;
        padding-top: 5px;
        cursor: pointer;
    }

    .icon-list li span {
        line-height: normal;
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
        color: #99a9bf;
        transition: color .15s linear;
        vertical-align: middle;
    }

    .icon-list li i {
        display: block;
        font-size: 14px;
        margin-bottom: 5px;
        color: #606266;
        transition: color .15s linear;
    }

    .icon-list li .icon-name {
        display: inline-block;
        padding: 0 3px;
        height: 1em;
    }
</style>
